<template>
  <div class="container-choice">
    <el-card>
      <!-- 头部-->
      <div class="clearfix">
        <el-button
          style="float: right;margin-bottom:15px;"
          type="success"
          size="small"
          icon="el-icon-edit"
          @click="addClick"
        >新增试题</el-button>
      </div>
      <!-- form表单区域 -->
      <el-form ref="formChoice" :model="query" label-width="80px">
        <el-row :gutter="5">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                size="small"
                v-model="query.subjectID"
                placeholder="请选择"
                @change="changeSub"
              >
                <el-option
                  v-for="item in subjectdata"
                  :key="item.id"
                  :label="item.subjectName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select size="small" v-model="query.catalogID" placeholder="请选择">
                <el-option
                  v-for="item in directorydata"
                  :key="item.id"
                  :label="item.directoryName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select size="small" v-model="query.tags" placeholder="请选择">
                <el-option
                  v-for="item in taglst"
                  :key="item.id"
                  :label="item.tagName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input size="small" v-model="query.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select size="small" v-model="query.questionType" placeholder="请选择">
                <el-option
                  v-for="(item, index) in questiontypedata"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select size="small" v-model="query.difficulty" placeholder="请选择">
                <el-option
                  v-for="(item, index) in difficultyList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select size="small" v-model="query.direction" placeholder="请选择...">
                <el-option
                  v-for="(item, index) in directionList"
                  :key="index"
                  :label="item"
                  :value="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入者">
              <el-select size="small" v-model="query.creatorID" placeholder="请选择..">
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input size="small" v-model="query.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input size="small" v-model="query.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-row>
                <el-col :span="11">
                  <el-form-item>
                    <el-select size="small" v-model="query.city" placeholder="请选择...">
                      <el-option
                        v-for="(item,index) in citySelect.provinces"
                        :key="index"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item>
                    <el-select size="small" v-model="query.province" placeholder="请选择...">
                      <el-option
                        v-for="(item, index) in citySelect.cityArea"
                        :key="index"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="btnRight">
              <el-button size="small" @click="clear">清除</el-button>
              <el-button type="primary" size="small" @click="Search">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- tabs标签页区域 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!-- 全部按钮区域 -->
        <el-tab-pane
          v-for="item in tabList"
          :key="item.value"
          :label="item.label"
          :name="item.value"
        >
          <!-- 查询条数提示 -->
          <el-alert type="info" show-icon style="margin-bottom:10px">{{total}}条数据</el-alert>
          <!-- 表格区域 -->
          <el-table :data="tableData" style="width: 100%" v-loading="tabloding">
            <el-table-column label="试题编号" width="200">
              <template slot-scope="scope">
                <span>{{ scope.row.number }}</span>
              </template>
            </el-table-column>
            <el-table-column label="学科" width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.subject }}</span>
              </template>
            </el-table-column>
            <el-table-column label="目录" width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.catalog }}</span>
              </template>
            </el-table-column>
            <el-table-column label="题型" width="100">
              <template slot-scope="scope">
                <span v-if="Number(scope.row.questionType) === 1">{{ '单选' }}</span>
                <span v-else-if="Number(scope.row.questionType) === 2">{{ '多选' }}</span>
                <span v-else-if="Number(scope.row.questionType) === 3">{{ '简答' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="题干" width="200px">
              <template slot-scope="scope">
                <span v-html="scope.row.question"></span>
              </template>
            </el-table-column>
            <el-table-column label="录入时间" width="200px">
              <template slot-scope="scope">
                <span>{{ scope.row.addDate | dateFormeat }}</span>
                <!-- 导入时间过滤器没使用dyjs  dateFormeat 在mai.js中自定 -->
              </template>
            </el-table-column>
            <el-table-column label="难度">
              <template slot-scope="scope">
                <span v-if="Number(scope.row.difficulty) === 1">{{ '简单' }}</span>
                <!-- 转成数字格式放置报错 -->
                <span v-else-if="Number(scope.row.difficulty) === 2">{{ '一般' }}</span>
                <!-- 转成数字格式放置报错 -->
                <span v-else-if="Number(scope.row.difficulty) === 3">{{ '困难' }}</span>
                <!-- 转成数字格式放置报错 -->
              </template>
            </el-table-column>
            <el-table-column label="录入人" width="100px">
              <template slot-scope="scope">
                <span>{{ scope.row.creator }}</span>
              </template>
            </el-table-column>
            <el-table-column label="审核状态" width="120px">
              <template slot-scope="scope">
                <span v-if="scope.row.chkState === 0">{{ '待审核' }}</span>
                <span v-if="scope.row.chkState === 1">{{ '通过' }}</span>
                <span v-if="scope.row.chkState === 2">{{ '拒绝' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="审核意见" width="150">
              <template slot-scope="scope">
                <span>{{ scope.row.chkRemarks }}</span>
              </template>
            </el-table-column>
            <el-table-column label="审核人" width="150">
              <template slot-scope="scope">
                <span>{{ scope.row.chkUser }}</span>
              </template>
            </el-table-column>
            <el-table-column label="发布状态">
              <template slot-scope="scope">
                <span v-if="scope.row.publishState === 0">{{ '下架' }}</span>
                <span v-else-if="scope.row.publishState === 1">{{ '上架' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200px" align="center" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="preview(scope.row)">预览</el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="Shenhe(scope.row.id)"
                  :disabled="scope.row.chkState === 1"
                >审核</el-button>
                <el-button
                  type="text"
                  size="mini"
                  :disabled="scope.row.publishState === 1"
                  @click="revClick(scope.row.id)"
                >修改</el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="publishClick(scope.row)"
                >{{ scope.row.publishState==1? '下架':'上架' }}</el-button>
                <el-button
                  type="text"
                  size="mini"
                  :disabled="scope.row.publishState === 1"
                  @click="delClick(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div style="margin-top:20px;float:right;">
            <el-pagination
              background
              :total="total"
              :current-page="query.page"
              :page-sizes="[5, 10, 15, 100]"
              layout="total, prev, pager, next, sizes, jumper"
              :page-size="query.pagesize"
              @current-change="hCurrentChange"
              @size-change="hSizeChange"
            ></el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- 点击审核显示的对话框 -->
      <question-dislog v-model="isshow" :sonID="sonID" @getData="getDataList"></question-dislog>
      <!-- 点击预览弹出的对话框 -->
      <div class="show">
        <el-dialog title="题目预览" :visible.sync="isprewshow" width="50%" :before-close="handleClose">
          <el-form ref="previewForm" :model="previewForm">
            <el-row>
              <!-- v-model="ruleForm.name" -->
              <el-col :span="6">
                <el-form-item label="【题型】 :">
                  <div v-if="Number(previewForm.questionType)===1">{{ '单选' }}</div>
                  <div v-else-if="Number(previewForm.questionType)===2">{{ '多选' }}</div>
                  <div v-else-if="Number(previewForm.questionType)===3">{{ '简答' }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="【编号】 :">{{ previewForm.id }}</el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="【难度】 :">
                  <span v-if="Number(previewForm.difficulty) === 1">{{ '简单' }}</span>
                  <span v-else-if="Number(previewForm.difficulty) === 2">{{ '一般' }}</span>
                  <span v-else-if="Number(previewForm.difficulty) === 3">{{ '困难' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="【标题】 :">{{ previewForm.tags}}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <!-- v-model="ruleForm.name" -->
              <el-col :span="6">
                <el-form-item label="【学科】 :">{{ previewForm.subjectName }}</el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="【目录】 :">{{ previewForm.directoryName }}</el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="【方向】 :">{{ previewForm.direction }}</el-form-item>
              </el-col>
            </el-row>
            <hr class="hStyle" />
            <el-form-item label="【题干】 :"></el-form-item>
            <template>
              <div v-html="previewForm.question"></div>
            </template>
            <template>
              <div v-if="Number(previewForm.questionType)===1">{{ '单选选项：(以下选中的内容为该选项的答案)' }}</div>
              <div v-else-if="Number(previewForm.questionType)===2">{{ '多选选项：(以下选中的内容为该选项的答案)' }}</div>
              <div v-else-if="Number(previewForm.questionType)===3">{{ '简答：(以内容为该题的答案)' }}</div>
            </template>
            <el-radio-group
              v-model="radio"
              v-if="Number(previewForm.questionType)===1"
              @change="changeRadio"
            >
              <el-radio
                :label="item.isRight"
                v-for="item in previewForm.options"
                :key="item.id"
              >{{ item.code }}</el-radio>
            </el-radio-group>
            <el-checkbox-group
              v-model="check"
              v-else-if="Number(previewForm.questionType)===2"
              @change="changeRadio"
            >
              <el-checkbox
                :label="item.isRight"
                v-for="item in previewForm.options"
                :key="item.id"
              >{{ item.code }}</el-checkbox>
            </el-checkbox-group>
            <hr class="hStyle" />
            <el-form-item label="【参考答案】 :">
              <el-button type="danger" size="small" @click="showVid">视频答案预览</el-button>
              <div class="vidShow" v-if="videoshow">
                <video :src="previewForm.videoURL" controls="controls"></video>
              </div>
            </el-form-item>
            <hr class="hStyle" />
            <el-form-item label="【答案解析】 :">
              <div class="answer">
                <span v-html="previewForm.answer"></span>
              </div>
            </el-form-item>
            <hr class="hStyle" />
            <el-form-item label="【题目备注】 :">{{ previewForm.remarks + ' 有答案' }}</el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="
            Clonse">关闭</el-button>
          </span>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>
<script>

// 导入常量数据
// chkType, publishType
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
// 导入接口
// 学科列表
import { list as subjectdata } from '@/api/hmmm/subjects.js' // :冒号导入会报错语法检查不通过使用as
// 目录列表
import { list as directorydata } from '@/api/hmmm/directorys.js'
// 标签列表
import { list as taglst } from '@/api/hmmm/tags.js'
// 用户列表
import { list as userList } from '@/api/base/users.js'
// 城市
import { provinces, citys } from '@/api/hmmm/citys.js'
// 精选题库列表choice+精选题库上下架接口choicePublish +基础题库删除remove+获取精选题库详情detail
import { choice, choicePublish, remove, detail } from '@/api/hmmm/questions.js'
// 导入弹出框组件
import QuestionDislog from '@/module-hmmm/components/questions-check.vue'
export default {
  name: 'ContainerChoice',
  data() {
    return {
      radio: 1, // 预览对话框的数据
      check: [1], // 多选框数组
      selectC: null, // 当前选中的城市的市级选项
      tabloding: true, // 控制表格数据还未显示出来的加载状态
      videoshow: false, // 控制视频显示与否
      previewForm: {
        options: [],
        answer: '',
        questionType: ''
        // selected: 1, // 预览对话框的数据
        // checkList: [1] // 多选框数组
      },
      isprewshow: false, // 控制预览弹出框的数据
      sonID: null, // 在子组件审核弹框中点击确认需要传递的参数id
      isshow: false, // 点击审核控制对话框是否弹出
      activeName: '-1',
      // 自己定义tab选项卡的数据没有导入api constans.js
      tabList: [
        {
          value: '-1',
          label: '全部'
        },
        {
          value: '0',
          label: '待审核'
        },
        {
          value: '1',
          label: '已审核'
        },
        {
          value: '2',
          label: '已拒绝'
        }
      ],
      subjectdata: [], // 学科列表数据
      directorydata: [], // 目录列表
      taglst: [], // 标签列表
      questiontypedata: questionType, // 题型数据
      difficultyList: difficulty, // 难度数据
      directionList: direction, // 方向数据
      userList: [], // 用户列表
      citySelect: { // 城市
        province: [], // 所有城市
        cityArea: [] // 城市下面的地区
      },
      query: {
        subjectID: null, // 学科id
        catalogID: null, // 二级目录id
        questionType: null, // 试题类型
        tags: null, // 标签id
        keyword: null, // 关键字
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录入人
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        city: null, // 企业所在的城市
        province: null, // 企业所在的省份
        page: 1, // 默认显示第一页
        pagesize: 10, // 每页显示的数据条数
        chkState: null
      },
      // chkState: '-1', // tabs标签栏绑定的数据--默认显示全部
      // page: 1, // 默认显示第一页
      // pagesize: 5, // 每页显示的数据条数
      total: null, // 总条数
      tableData: [] // 表格列表
    }
  },
  components: {
    // 注册组件
    QuestionDislog
  },

  computed: {
    /*   titleMsg() {
        return '总共显示' + this.total + '条数据'
      } */
  },
  created() {
    this.getSubjectList()
    // 调用用户列表
    this.getUserList()
    // 获取城市
    this.getallcity()
    this.gettabledata() // 初始化列表
  },
  watch: {
    'query.city': function (newVal, oldVal) {
      if (newVal) {
        this.query.province = null
        this.citySelect.cityArea = citys(newVal)
      }
    }
  },
  methods: {
    // 预览点击多选/单选按钮
    changeRadio(val) {
      this.radio = 1
      this.check = [1]
    },
    // 点击多少条/页的选项
    hSizeChange(pagsizeval) {
      console.log('当前显示的条数', pagsizeval)
      this.query.pagesize = pagsizeval
      this.query.page = 1
      this.gettabledata()
    },
    hProvince(val) {
      console.log('二级城市', val)
      this.query.province = val
    },
    // 点击弹出框的关闭按钮
    Clonse() {
      this.isprewshow = false
      this.videoshow = false
    },
    // 点击视频预览显示视频
    showVid() {
      this.videoshow = true
    },
    // 点击对话框上面的x关闭弹框
    handleClose(done) {
      this.isprewshow = false
      this.videoshow = false
    },
    // 点击预览按钮
    async preview(scopvalue) {
      // console.log('预览', scopvalue.id)
      // 弹出对话框
      this.isprewshow = true
      // 调用接口获取详情数据
      const data = {
        id: scopvalue.id
      }
      const res = await detail(data)
      console.log('题库详情', res)
      this.previewForm = res.data
      console.log('题库详情111', this.previewForm)
      console.log(this.previewForm.videoURL)
    },
    // 点击删除
    delClick(scopvalue) {
      console.log('删除', scopvalue.id)
      this.$confirm('确定删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = {
          id: scopvalue.id
        }
        const res = await remove(data)
        console.log('删除', res)
        // 刷新列表
        this.handleClick()
        // 给出提示
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        // 点击取消不需要任何操作
      })
    },
    // 点击上架按钮
    // {{ scope.row.publishState==1? '下架':'上架' }}
    publishClick(scopvalue) {

      this.$confirm(`确定是要${scopvalue.publishState === 1 ? '下架' : '上架'}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 调用接口上架/下架该条数据
        const data = {
          id: scopvalue.id,
          publishState: scopvalue.publishState === 1 ? 0 : 1
        }
        const res = await choicePublish(data)
        console.log('上架/下架成功', res)
        // 刷新列表
        this.handleClick()
        // 给出提示
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      }).catch(() => {
        // 点击取消不需要任何操作
      })
    },
    // 点击修改按钮
    revClick(id) {
      // console.log('编辑', id)
      this.$router.push({
        path: 'new',
        query: {
          id
        }
      })
    },
    // 审核成功---刷新列表---审核弹框弹抛出来的事件
    getDataList() {

      this.gettabledata()
    },

    // 点击审核
    Shenhe(id) {
      // console.log('点击审核', id)
      this.isshow = true
      this.sonID = id
    },
    // 点击新增试题--跳到试题
    addClick() {
      this.$router.push('new')
    },
    // 点击搜索按钮
    Search() {
      // console.log('搜索')
      this.query.page = 1
      this.query.pagesize = 10
      this.gettabledata()
    },
    // 点击切换分页
    hCurrentChange(pageVal) {
      console.log('当前页码', pageVal)
      this.query.page = pageVal
      this.gettabledata()
    },

    async gettabledata() {
      // console.log(this.chkState)
      // const res = await choice(data)
      const res = await choice(this.query)
      console.log('表格列表', res)
      this.tableData = res.data.items
      // 总条数
      this.total = res.data.counts
      this.tabloding = false
    },

    // 点击清除按钮时清空表单
    clear() {
      //  this.$refs.query.resetFields()
      // 置空表单
      this.query = {
        page: 1,
        pagesize: 10,
        chkState: null,
        subjectID: null, // 学科id
        catalogID: null, // 二级目录id
        questionType: null, // 试题类型
        tags: null, // 标签id
        keyword: null, // 关键字
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录入人
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        city: null, // 企业所在的城市
        province: null // 企业所在的省份
      }

      this.handleClick()

      this.citySelect.cityArea = []
      // this.citySelect.province = []
    },
    // 点击学科时触发获取二级目录事件+
    changeSub() {
      // console.log(this.query.subjectID)
      this.getdatas()
      this.gettags()
    },
    // 点击城市下拉框
    cityslect(city) {
      // console.log('当前点击的城市', city)
      this.citySelect.cityArea = citys(city)
      // 点击时选中的当前城市
      this.selectC = city

    },
    // 获取所有城市
    getallcity() {
      this.citySelect.provinces = provinces()
      // return this.citySelect.provinces
      // console.log('所有城市', this.citySelect.provinces)
    },
    // 获取用户列表
    async getUserList() {
      const obj = {
        keyword: this.query.keyword
      }
      const res = await userList(obj)
      // console.log('用户列表', res)
      this.userList = res.data.list
    },
    // 获取标签列表
    async gettags() {
      const obj = {
        subjectID: this.query.subjectID
      }
      const res = await taglst(obj)
      // console.log('标签列表', res)
      this.taglst = res.data.items
    },
    // 获取目录列表
    async getdatas() {
      const obj = {
        subjectID: this.query.subjectID
      }
      const res = await directorydata(obj)
      // console.log('目录列表', res)
      this.directorydata = res.data.items
    },
    // 获取学科列表
    async getSubjectList() {
      const obj = {
        page: this.page,
        pagesize: 20
      }
      try {
        const res = await subjectdata(obj)
        // console.log('学科列表', res)
        this.subjectdata = res.data.items
      } catch (err) {
        console.log(err)
      }
    },
    // tabs标签页按钮点击时切换的事件
    handleClick() {
      // console.log(this.chkState)
      // 获取表格数据
      // this.gettabledata()
      if (this.activeName === '-1') {
        this.query.page = 1
        this.query.pagesize = 10
        this.query.chkState = null
        this.gettabledata(this.query)
      } else if (this.activeName === '0') {
        this.query.page = 1
        this.query.pagesize = 10
        this.query.chkState = '0'
        this.gettabledata(this.query)
      } else if (this.activeName === '1') {
        this.query.page = 1
        this.query.pagesize = 10
        this.query.chkState = '1'
        this.gettabledata(this.query)
      } else if (this.activeName === '2') {
        this.query.page = 1
        this.query.pagesize = 10
        this.query.chkState = '2'
        this.gettabledata(this.query)
      }
    }
  }
}
</script>

<style scoped lang='less'>
.el-row {
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
/deep/.el-pagination__jump {
  margin-left: 0;
}
.show/deep/.el-form-item--medium {
  margin-bottom: 4px;
}

.show .hStyle {
  border: 1px solid #d6d6d6;
}
.show .el-radio {
  display: block;
  margin-top: 5px;
}
.show .el-checkbox {
  display: block;
  margin-top: 5px;
}
.show .vidShow {
  width: 300px;
  height: 200px;
  // border: 1px solid red;
  margin-top: 30px;
}
.show .vidShow video {
  width: 100%;
  height: 100%;
  object-fit: fill;
  // object-fit: cover;
}
.show .vidShow video:focus {
  outline: -webkit-focus-ring-color auto 0px;
}
</style>
